@extends('layouts.mobile_main')

@section('title', '翻贝轨迹')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
        .trajectory_outer{width: 100%;background: url({{env('IMAGE_DOMAIN')}}images/background.jpg) 0 0 no-repeat;background-size: 100%;}
    </style>
@endsection

@section('content')
	<div class="trajectory_outer">
		<header class="trajectory oh">
			<a class="fl" href="javascript:history.go(-1);"><img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_w.png?v={{env('IMAGE_VERSION')}}" alt=""></a>
			<span class="fl co_white fz_48">翻贝轨迹</span>
		</header>
		<section class="trajectory_center oh">
			<div class="oh trajectory_name">
				<img class="fl" src="{{$avatar}}" alt="">
				<div class="fl fz_40 co_white">
					<p>Hi~ <span class="co_yellow fz_65">{{$nickname}}</span></p>
					<p><span class="fz_50">今天</span>是您在<span class="fz_50">翻贝网</span>的</p>
					<p class="fz_50 tc">第 <span class="co_yellow fz_65">{{$sumday}}</span> 天</p>
				</div>
			</div>
			<div class="pr trajectory_xx">
				<img src="{{env('IMAGE_DOMAIN')}}/images/picture.png?v={{env('IMAGE_VERSION')}}" alt="">
				<ul class="trajectory_xxtext fz_44 co_white" id="trajectory_xxtext1">
                    @if($sumrechargemoney == '')
                        <li class="trajectory_xxtext1">累计充值 <span class="co_yellow">0</span> 元,翻倍到账 <span class="co_yellow">{{2*$sumrechargemoney}}</span></li>
                    @else
                        <li class="trajectory_xxtext1">累计充值 <span class="co_yellow">{{$sumrechargemoney}}</span> 元,翻倍到账 <span class="co_yellow">{{2*$sumrechargemoney}}</span></li>
                    @endif
                    @if($sumordermoney == '')
                        <li class="trajectory_xxtext2">累计消费 <span class="co_yellow">0</span></li>
                    @else
                        <li class="trajectory_xxtext2">累计消费 <span class="co_yellow">{{$sumordermoney}}</span></li>
                    @endif

					<li class="trajectory_xxtext3">翻贝网累计为您省了<span class="co_yellow">{{$savemoney}}</span></li>
				</ul>
			</div>
			<div class="pr trajectory_xx" style="margin-top: 1.15rem;">
				<img src="{{env('IMAGE_DOMAIN')}}/images/picture.png?v={{env('IMAGE_VERSION')}}" alt="">
				<ul class="trajectory_xxtext fz_44 co_white" id="trajectory_xxtext2">
					<li class="trajectory_xxtext1"><span>{{$createdat}}</span>您来到了翻贝网</li>
					@if(($firstrechargetime != '0000-00-00 00:00:00') && ($firstrechargetime != '') )
					    <li class="trajectory_xxtext2"><span>{{$firstrechargetime}}</span>您第一次充值<span></span></li>
					@endif

					@if(($firstordertime != '0000-00-00 00:00:00') && ($firstordertime != '') )
					    <li class="trajectory_xxtext3"><span>{{$firstordertime}}</span>您在<span>{{$firstshopname}}</span>开始了第一笔消费单</li>
					@endif
				</ul>
			</div>
			<p id="weixin_user" class="trajectory_fx">炫耀一下</p>
            <input id="mobile_user" style="background: none;" class="trajectory_fx" type="button" name="" value="炫耀一下" onclick="share(window.location.href)">
		</section>
	</div>
@endsection

@section('scriptResources')
    @parent
    <script>
        window.onresize=function(){
            pagesp();
            /*$(function(){
                var trajectory_outer_h=$(window).height();
                if(navigator.userAgent=='FBWAndroidApp'||navigator.userAgent.indexOf('FBWiOSApp')>0){
                    $('#mobile_user').show();
                    $('#weixin_user').hide();
                    $('header').hide();
                    $(".trajectory_outer").css({"min-height":trajectory_outer_h});
                    var trajectory_center_outer_h=$(window).height();
                    $(".trajectory_center").css({"min-height":trajectory_center_outer_h-1});
                }else{
                    $('#mobile_user').hide();
                    $('#weixin_user').hide();
                    $('header').show();
                    $(".trajectory_outer").css({"min-height":trajectory_outer_h});
                    var trajectory_center_outer_h=$(window).height()-$(".trajectory").height();
                    $(".trajectory_center").css({"min-height":trajectory_center_outer_h-1});
                }
                $("#trajectory_xxtext1 .trajectory_xxtext1").animate({
                    left: "2rem"
                },2000,function(){
                    $("#trajectory_xxtext1 .trajectory_xxtext2").animate({
                        left: "2rem"
                    },2000,function(){
                        $("#trajectory_xxtext1 .trajectory_xxtext3").animate({
                            left: "2rem"
                        },2000,function(){
                            $("#trajectory_xxtext2 .trajectory_xxtext1").animate({
                                left: "2rem"
                            },2000,function(){
                                $("#trajectory_xxtext2 .trajectory_xxtext2").animate({
                                    left: "2rem"
                                },2000,function(){
                                    $("#trajectory_xxtext2 .trajectory_xxtext3").animate({
                                        left: "2rem"
                                    },2000)
                                })
                            })
                        })
                    })
                })
                function auto(){
                    setInterval(function(){
                        $(".trajectory_fx").animate({
                            opacity: 0.2
                        },1000,function(){
                            $(".trajectory_fx").animate({
                                opacity: 1
                            },1000)
                        })
                    },1000)
                }
                auto()
            })*/
        }
        $(function(){
            var trajectory_outer_h=$(window).height();
            if(navigator.userAgent=='FBWAndroidApp'||navigator.userAgent.indexOf('FBWiOSApp')>0){
                $('#mobile_user').show();
                $('#weixin_user').hide();
                $('header').hide();
                $(".trajectory_outer").css({"min-height":trajectory_outer_h});
                var trajectory_center_outer_h=$(window).height();
                $(".trajectory_center").css({"min-height":trajectory_center_outer_h-1});
            }else{
                $('#mobile_user').hide();
                $('#weixin_user').hide();
                $('header').show();
                $(".trajectory_outer").css({"min-height":trajectory_outer_h});
                var trajectory_center_outer_h=$(window).height()-$(".trajectory").height();
                $(".trajectory_center").css({"min-height":trajectory_center_outer_h-1});
            }
            $("#trajectory_xxtext1 .trajectory_xxtext1").animate({
                left: "2rem"
            },2000,function(){
                $("#trajectory_xxtext1 .trajectory_xxtext2").animate({
                    left: "2rem"
                },2000,function(){
                    $("#trajectory_xxtext1 .trajectory_xxtext3").animate({
                        left: "2rem"
                    },2000,function(){
                        $("#trajectory_xxtext2 .trajectory_xxtext1").animate({
                            left: "2rem"
                        },2000,function(){
                            $("#trajectory_xxtext2 .trajectory_xxtext2").animate({
                                left: "2rem"
                            },2000,function(){
                                $("#trajectory_xxtext2 .trajectory_xxtext3").animate({
                                    left: "2rem"
                                },2000)
                            })
                        })
                    })
                })
            })
            function auto(){
                setInterval(function(){
                    $(".trajectory_fx").animate({
                        opacity: 0.2
                    },1000,function(){
                        $(".trajectory_fx").animate({
                            opacity: 1
                        },1000)
                    })
                },1000)
            }
            auto()
        })
        //分享
          function share(url){
            MobileJS.share(url);
            // console.log()
          }
    </script>
@endsection
